<!DOCTYPE html>
<html lang="es">
<head>
    <link rel="stylesheet" href="jqwidgets-ver2.6.1_2/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets-ver2.6.1_2/jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="jqwidgets-ver2.6.1_2/scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets-ver2.6.1_2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets-ver2.6.1_2/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets-ver2.6.1_2/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets-ver2.6.1_2/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets-ver2.6.1_2/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets-ver2.6.1_2/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets-ver2.6.1_2/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets-ver2.6.1_2/jqwidgets/jqxgrid.js"></script>
	<script type="text/javascript" src="jqwidgets-ver2.6.1_2/jqwidgets/jqxgrid.selection.js"></script>
  	<script type="text/javascript" src="jqwidgets-ver2.6.1_2/jqwidgets/jqxgrid.pager.js"></script>
   <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'numero_factura'},
                    { name: 'digito_factura'},
                    { name: 'fecha_factura'},
                    { name: 'fecha_vencimiento'},
                    { name: 'codigo_cliente'},
          
                ],
				id: 'numero_factura',
                url: 'data.php',
				cache: false,
				root: 'Rows',
                beforeprocessing: function (data) {
                    source.totalrecords = data[0].TotalRows;
                }     
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
			
			$("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                theme: 'classic',
				pageable: true,
				autoheight: true,
                virtualmode: true,
                rendergridrows: function () {
                    return dataAdapter.records;
                },				
                columns: [
				 { text: 'Company Name', datafield: 'numero_factura', width: 250}, 
                  { text: 'Company Name', datafield: 'digito_factura', width: 250},               
                  { text: 'Contact Title', datafield: 'fecha_factura', width: 180 },
                  { text: 'Address', datafield: 'fecha_vencimiento', width: 200 },
                  { text: 'City', datafield: 'codigo_cliente', width: 120 }
              ]
            });        
			
			// init detalle factura
			$("#ordersGrid").jqxGrid(
			{
				virtualmode: true,
				pageable: true,
				autoheight: true,
				theme: 'classic',
				columns: [
		
					  { text: 'numero_factura', datafield: 'numero_factura', width: 200 },
					  { text: 'codigo Name', datafield: 'codigo', width: 200 },					 
					  { text: 'codigo_producto', datafield: 'codigo_producto', width: 180 },
					  { text: 'descripcion', datafield: 'descripcion', width: 100 },
					  { text: 'cantidad', datafield: 'cantidad', width: 140 }
				  ]
			});
			
			 $("#jqxgrid").bind('rowselect', function (event) {
				var row = event.args.rowindex;
				var id = $("#jqxgrid").jqxGrid('getrowdata', row)['numero_factura'];
				var source =
				{
					url: 'data.php',
					dataType: 'json',
					data: {numero_factura: id},
					datatype: "json",
					cache: false,
					datafields: [
						
						 { name: 'codigo' },
						 { name: 'numero_factura' },
						 { name: 'codigo_producto' },
						 { name: 'descripcion' },
						 { name: 'cantidad' }
					],
					root: 'Rows',
					beforeprocessing: function (data) {
						source.totalrecords = data[0].TotalRows;
					}     
 				};
				var adapter = new $.jqx.dataAdapter(source);
					// initialize jqxGrid
					$("#ordersGrid").jqxGrid(
					{
						source: adapter,
						rendergridrows: function (obj) {
							return obj.data;
						}
					});
			  });
        });
    </script>
</head>
<body class='default' style="width:100%;">
   <h3>Customers</h3>
   <div id="jqxgrid"></div>
   <h3>Orders by Customer</h3> 
   <div id="ordersGrid"></div>
</body>
</html>